import React from 'react';
import { motion } from 'framer-motion';
import { 
  CheckCircle, 
  XCircle, 
  Target, 
  Lightbulb,
  ArrowRight,
  Star
} from 'lucide-react';
import { DesignPattern } from '@/types';

interface OverviewTabProps {
  pattern: DesignPattern;
}

const OverviewTab: React.FC<OverviewTabProps> = ({ pattern }) => {
  return (
    <div className="min-h-full p-6">
      <div className="max-w-4xl mx-auto space-y-8">
        {/* Description */}
        <motion.section
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          <h2 className="text-2xl font-bold text-gray-900 mb-4">模式介绍</h2>
          <div className="bg-gray-50 rounded-lg p-6">
            <p className="text-gray-700 leading-relaxed text-lg">
              {pattern.description}
            </p>
          </div>
        </motion.section>

        {/* Design Principles */}
        <motion.section
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.1 }}
        >
          <h2 className="text-2xl font-bold text-gray-900 mb-4">设计原则</h2>
          <div className="grid md:grid-cols-2 gap-4">
            {pattern.principles.map((principle, index) => (
              <motion.div
                key={index}
                className="flex items-start space-x-3 p-4 bg-white rounded-lg border border-gray-200 hover:shadow-md transition-shadow"
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: index * 0.1 }}
                whileHover={{ x: 5 }}
              >
                <Target className="w-5 h-5 text-primary-600 mt-0.5 flex-shrink-0" />
                <span className="text-gray-700">{principle}</span>
              </motion.div>
            ))}
          </div>
        </motion.section>

        {/* Use Cases */}
        <motion.section
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
        >
          <h2 className="text-2xl font-bold text-gray-900 mb-4">适用场景</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
            {pattern.useCases.map((useCase, index) => (
              <motion.div
                key={index}
                className="flex items-center space-x-3 p-4 bg-white rounded-lg border border-gray-200 hover:shadow-md transition-all duration-200"
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: index * 0.1 }}
                whileHover={{ scale: 1.02 }}
              >
                <div className="w-2 h-2 bg-primary-500 rounded-full flex-shrink-0"></div>
                <span className="text-gray-700">{useCase}</span>
              </motion.div>
            ))}
          </div>
        </motion.section>

        {/* Pros and Cons */}
        <motion.section
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.3 }}
        >
          <h2 className="text-2xl font-bold text-gray-900 mb-6">优缺点分析</h2>
          <div className="grid md:grid-cols-2 gap-6">
            {/* Advantages */}
            <div className="bg-green-50 rounded-lg p-6">
              <div className="flex items-center space-x-2 mb-4">
                <CheckCircle className="w-6 h-6 text-green-600" />
                <h3 className="text-lg font-semibold text-green-800">优点</h3>
              </div>
              <div className="space-y-3">
                {pattern.advantages.map((advantage, index) => (
                  <motion.div
                    key={index}
                    className="flex items-start space-x-3"
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: index * 0.1 }}
                  >
                    <div className="w-1.5 h-1.5 bg-green-500 rounded-full mt-2 flex-shrink-0"></div>
                    <span className="text-green-700">{advantage}</span>
                  </motion.div>
                ))}
              </div>
            </div>

            {/* Disadvantages */}
            <div className="bg-red-50 rounded-lg p-6">
              <div className="flex items-center space-x-2 mb-4">
                <XCircle className="w-6 h-6 text-red-600" />
                <h3 className="text-lg font-semibold text-red-800">缺点</h3>
              </div>
              <div className="space-y-3">
                {pattern.disadvantages.map((disadvantage, index) => (
                  <motion.div
                    key={index}
                    className="flex items-start space-x-3"
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: index * 0.1 }}
                  >
                    <div className="w-1.5 h-1.5 bg-red-500 rounded-full mt-2 flex-shrink-0"></div>
                    <span className="text-red-700">{disadvantage}</span>
                  </motion.div>
                ))}
              </div>
            </div>
          </div>
        </motion.section>

        {/* Best Practices */}
        <motion.section
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.4 }}
        >
          <h2 className="text-2xl font-bold text-gray-900 mb-4">最佳实践</h2>
          <div className="bg-blue-50 rounded-lg p-6">
            <div className="flex items-center space-x-2 mb-4">
              <Lightbulb className="w-6 h-6 text-blue-600" />
              <h3 className="text-lg font-semibold text-blue-800">实施建议</h3>
            </div>
            <div className="grid md:grid-cols-2 gap-4">
              {pattern.bestPractices.map((practice, index) => (
                <motion.div
                  key={index}
                  className="flex items-start space-x-3 p-3 bg-white rounded-lg border border-blue-200"
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.1 }}
                  whileHover={{ x: 5 }}
                >
                  <Star className="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" />
                  <span className="text-blue-700 text-sm">{practice}</span>
                </motion.div>
              ))}
            </div>
          </div>
        </motion.section>

        {/* Quick Actions */}
        <motion.section
          className="bg-gradient-to-r from-primary-500 to-secondary-600 rounded-lg p-6 text-white"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.5 }}
        >
          <h2 className="text-xl font-bold mb-4">下一步</h2>
          <p className="text-primary-100 mb-6">
            现在您已经了解了{pattern.name}的基本概念，可以查看代码实现或进行交互式演示。
          </p>
          <div className="flex flex-wrap gap-3">
            <motion.button
              className="bg-white text-primary-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition-colors flex items-center space-x-2"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              <span>查看代码</span>
              <ArrowRight className="w-4 h-4" />
            </motion.button>
            <motion.button
              className="border border-white text-white px-4 py-2 rounded-lg font-medium hover:bg-white hover:text-primary-600 transition-colors flex items-center space-x-2"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              <span>开始演示</span>
              <ArrowRight className="w-4 h-4" />
            </motion.button>
          </div>
        </motion.section>
      </div>
    </div>
  );
};

export default OverviewTab;
